<template>
  <div class="dataScreen-container">
    <div ref="dataScreenRef" class="dataScreen-content">
      <div class="dataScreen-header">
        <div class="header-lf"></div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>安全生产综合监控中心</span>
          </div>
        </div>
        <div class="header-ri">
          <span class="header-time">当前时间：{{ time }}</span>
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="dataScreen-lf">
          <div class="dataScreen-top">
            <div class="dataScreen-main-title">
              <div></div>
              <span>当前问题治理统计分析</span>
            </div>
            <div class="dataScreen-main-chart">
              <CurrentProblem :problem-option="problemOption"></CurrentProblem>
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="dataScreen-main-title">
              <div></div>
              <span>区域问题</span>
            </div>
            <div class="dataScreen-main-chart">
              <AreaProblem :area-option="areaOption"></AreaProblem>
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="dataScreen-main-title">
              <div></div>
              <span>问题来源</span>
            </div>
            <div class="dataScreen-main-chart">
              <Source :source-option="sourceOption"></Source>
            </div>
          </div>
        </div>
        <div class="dataScreen-lf dataScreen-ct" style="width: 36%">
          <div style="height: 16%">
            <!-- <Center /> -->
          </div>
          <div class="dataScreen-center" style="height: 40%">
            <div class="dataScreen-main-chart">
              <!-- <RealTime ></RealTime> -->
            </div>
          </div>
          <div class="dataScreen-bottom" style="height: 38%">
            <div class="dataScreen-main-title">
              <div></div>
              <span>问题治理投入</span>
            </div>
            <div class="dataScreen-main-chart">
              <PutInto :put-option="putOption"></PutInto>
            </div>
          </div>
        </div>
        <div class="dataScreen-lf">
          <div class="dataScreen-top" style="height: 48%">
            <div class="dataScreen-main-title">
              <div></div>
              <span>问题统计分析</span>
            </div>
            <div class="dataScreen-main-chart">
              <Analysis :analysis-option="analysisOption"></Analysis>
            </div>
          </div>
          <div class="dataScreen-bottom" style="height: 48%">
            <div class="dataScreen-main-title">
              <div></div>
              <span>问题排行</span>
            </div>
            <div class="dataScreen-main-chart">
              <Ranking :ranking-option="rankingOption"></Ranking>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataScreen">
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import CurrentProblem from './draw/currentProblem.vue'
import AreaProblem from './draw/areaProblem.vue'
import PutInto from './draw/putInto.vue'
import Analysis from './draw/analysis.vue'
import Ranking from './draw/ranking.vue'
import Source from './draw/source.vue'
// import RealTime from './draw/realTime.vue'
// import Center from './draw/center.vue'

const router = useRouter()
const dataScreenRef = ref(null)

const problemOption = reactive({
  color: ['#f90303', '#fd9400', '#ffc605', '#3370ff'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
    },
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      //x轴文字的配置
      show: true,
      textStyle: {
        color: 'rgba(219,225,255,1)',
      },
    },
  },
  yAxis: {
    type: 'category',
    data: ['今日完成', '待检查', '待整改', '待确认'],
    axisLabel: {
      //y轴文字的配置
      textStyle: {
        color: '#ffffff',
        margin: 15,
      },
      // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
    },
  },
  series: [
    {
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
      },
      emphasis: {
        focus: 'series',
      },
      data: [120, 102, 101, 134],
    },
    {
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
      },
      emphasis: {
        focus: 'series',
      },
      data: [220, 232, 201, 234],
    },
    {
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
      },
      emphasis: {
        focus: 'series',
      },
      data: [120, 102, 111, 134],
    },
    {
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
      },
      emphasis: {
        focus: 'series',
      },
      data: [250, 262, 291, 254],
      barWidth: '30px',
      itemStyle: {
        barBorderRadius: [0, 30, 30, 0],
      },
    },
  ],
})

const areaOption = reactive({
  xAxis: {
    type: 'category',
    data: ['生产区', '仓库区', '车间1', '车间2', '车间3', '车间4', '车间5'],
    axisLabel: {
      //y轴文字的配置
      textStyle: {
        color: '#909399',
        margin: 15,
      },
      // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      //y轴文字的配置
      textStyle: {
        color: '#909399',
        margin: 15,
      },
      // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
    },
  },
  series: [
    {
      data: [32, 30, 27, 32, 26, 21, 28],
      type: 'bar',
      barWidth: '20px',
      itemStyle: {
        normal: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#53c3e8',
              },
              {
                offset: 1,
                color: '#3565c0',
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          barBorderRadius: [30, 30, 0, 0],
          shadowColor: 'rgba(0,160,221,1)',
          shadowBlur: 4,
        },
      },
    },
  ],
})

const putOption = reactive({
  grid: {
    top: 30,
    bottom: 20,
  },
  xAxis: [
    {
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: {
        color: '#fff',
        fontSize: 10,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
  ],
  yAxis: [
    {
      nameTextStyle: {
        color: '#8CB5E2',
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#182450',
        },
      },
      axisLabel: {
        color: '#8CB5E2',
      },
    },
  ],
  // 使用内部缩放（滚轮缩放、鼠标拖着左右滑动）
  dataZoom: [
    {
      type: 'inside',
      minValueSpan: 8, // 最小展示数
      start: 0, // 开始展示位置（默认）
      end: 5, // 结束展示位置 （默认）
    },
  ],
  series: [
    {
      name: 'hill',
      // 象柱形图
      type: 'pictorialBar',
      // 同一系列的柱间距离
      barCategoryGap: '-60%',
      // 自定义svg 图标 (三角锥形的关键)
      symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
      // 默认样式
      itemStyle: {
        label: {
          show: false,
        },
        borderColor: '#206fde',
        borderWidth: 2,
        color: {
          colorStops: [
            {
              offset: 0,
              color: 'rgba(4, 202, 190)',
            },
            {
              offset: 1,
              color: 'rgba(4, 202, 190, 0.1)',
            },
          ],
        },
      },
      // 鼠标滑过样式
      emphasis: {
        label: {
          show: true,
          position: 'top',
          color: '#12DCFF',
        },
        itemStyle: {
          borderColor: '#17cdfa',
          borderWidth: 2,
          color: {
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0,238,255, 0.09)',
              },
              {
                offset: 1,
                color: 'rgba(23,205,250, 0.5)',
              },
            ],
          },
        },
      },
      data: [600, 460, 350, 470, 450, 620, 470, 450, 470, 450, 390],
      z: 10,
    },
  ],
})

const analysisOption = reactive({
  color: ['#f90303', '#fd9400', '#ffc605', '#3370ff'],
  legend: {
    textStyle: {
      color: '#fff',
    },
  },
  tooltip: {},
  dataset: {
    source: [
      ['product', '重大风险', '较大风险', '一般风险', '低风险'],
      ['09-11', 1, 3, 4, 7],
      ['09-12', 3, 4, 6, 5],
      ['09-13', 1, 4, 2, 3],
      ['09-14', 1, 4, 7, 5],
      ['09-15', 1, 2, 6, 11],
      ['09-16', 1, 4, 9, 5],
      ['09-17', 1, 3, 4, 7],
    ],
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
    {
      type: 'bar',
    },
    { type: 'bar' },
    { type: 'bar' },
    { type: 'bar' },
  ],
})

const rankingOption = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
  },
  yAxis: {
    type: 'category',
    data: ['区域位置', '设施设备', '作业活动', '管理'],
    axisLabel: {
      //y轴文字的配置
      textStyle: {
        color: '#ffffff',
        margin: 15,
      },
      // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
    },
  },
  series: [
    {
      type: 'bar',
      data: [53, 66, 87, 105],
      barWidth: '20px',
      itemStyle: {
        normal: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#87f9c8',
              },
              {
                offset: 1,
                color: '#66baf7',
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          barBorderRadius: [0, 30, 30, 0],
        },
      },
    },
  ],
})

const sourceOption = reactive({
  dataset: [
    {
      source: [
        ['Product', 'Sales', 'Price', 'Year'],
        ['班组巡检', 123, 32, 2011],
        ['随手拍', 231, 14, 2011],
        ['安全巡检', 235, 5, 2011],
        ['公司检查', 341, 25, 2011],
        ['领导巡检', 122, 29, 2011],
        ['班组巡检', 143, 30, 2012],
        ['随手拍', 201, 19, 2012],
        ['安全巡检', 255, 7, 2012],
        ['公司检查', 241, 27, 2012],
        ['领导巡检', 102, 34, 2012],
        ['班组巡检', 153, 28, 2013],
        ['随手拍', 181, 21, 2013],
        ['安全巡检', 395, 4, 2013],
        ['公司检查', 281, 31, 2013],
        ['领导巡检', 92, 39, 2013],
        ['班组巡检', 223, 29, 2014],
        ['随手拍', 211, 17, 2014],
        ['安全巡检', 345, 3, 2014],
        ['领导巡检', 211, 35, 2014],
        ['安全巡检', 72, 24, 2014],
      ],
    },
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2011 },
      },
    },
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2012 },
      },
    },
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2013 },
      },
    },
  ],
  series: [
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '25%'],
      datasetIndex: 1,
    },
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '50%'],
      datasetIndex: 2,
    },
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '75%'],
      datasetIndex: 3,
    },
  ],
  // Optional. Only for responsive layout:
  media: [
    {
      query: { minAspectRatio: 1 },
      option: {
        series: [
          { center: ['25%', '50%'] },
          { center: ['50%', '50%'] },
          { center: ['75%', '50%'] },
        ],
      },
    },
    {
      option: {
        series: [
          { center: ['50%', '25%'] },
          { center: ['50%', '50%'] },
          { center: ['50%', '75%'] },
        ],
      },
    },
  ],
})

onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    dataScreenRef.value.style.width = `1920px`
    dataScreenRef.value.style.height = `1080px`
  }
  window.addEventListener('resize', resize)
})

// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  }
}

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  const ww = window.innerWidth / width
  const wh = window.innerHeight / height
  return ww < wh ? ww : wh
}

// 获取当前时间
let timer: NodeJS.Timer | null = null
const time = ref<string>(dayjs().format('YYYY年MM月DD HH:mm:ss'))
timer = setInterval(() => {
  time.value = dayjs().format('YYYY年MM月DD HH:mm:ss')
}, 1000)

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
  clearInterval(timer!)
})
</script>
<style lang="less" scoped>
.dataScreen-container {
  width: 100%;
  height: 100%;
  background: url('./images/bg.png') no-repeat;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  background-size: cover;
  .dataScreen-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s;
    transform-origin: left top;
    .dataScreen-header {
      display: flex;
      width: 100%;
      height: 38px;
      margin-bottom: 40px;
      .header-lf,
      .header-ri {
        position: relative;
        width: 567px;
        height: 100%;
        background: url('./images/dataScreen-header-left-bg.png') no-repeat;
        background-size: 100% 100%;
      }
      .header-ct {
        position: relative;
        flex: 1;
        height: 100%;
        .header-ct-title {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 82px;
          font-family: YouSheBiaoTiHei;
          font-size: 32px;
          line-height: 78px;
          color: #05e8fe;
          text-align: center;
          letter-spacing: 4px;
          background: url('./images/dataScreen-header-center-bg.png') no-repeat;
          background-size: 100% 100%;
          .header-ct-warning {
            position: absolute;
            bottom: -42px;
            left: 50%;
            width: 622px;
            height: 44px;
            font-family: YouSheBiaoTiHei;
            font-size: 14px;
            line-height: 44px;
            color: #ffffff;
            text-align: center;
            letter-spacing: 1px;
            background: url('./images/dataScreen-header-warn-bg.png') no-repeat;
            background-size: 100% 100%;
            transform: translateX(-50%);
          }
        }
      }
      .header-screening,
      .header-download {
        position: absolute;
        z-index: 9;
        box-sizing: border-box;
        width: 136px;
        height: 42px;
        font-family: YouSheBiaoTiHei;
        font-size: 18px;
        font-weight: 400;
        line-height: 42px;
        color: #29fcff;
        text-align: center;
        cursor: pointer;
        background-size: 100% 100%;
      }
      .header-screening {
        right: 0;
        padding-right: 4px;
        background: url('./images/dataScreen-header-btn-bg-l.png') no-repeat;
      }
      .header-download {
        left: 0;
        padding-right: 0;
        background: url('./images/dataScreen-header-btn-bg-r.png') no-repeat;
      }
      .header-time {
        position: absolute;
        top: 0;
        right: 14px;
        width: 310px;
        font-family: YouSheBiaoTiHei;
        font-size: 17px;
        font-weight: 400;
        line-height: 38px;
        color: #05e8fe;
        white-space: nowrap;
      }
    }
    .dataScreen-main {
      box-sizing: border-box;
      display: flex;
      flex: 1;
      width: 100%;
      padding-top: 42px;
      .dataScreen-lf {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30%;
        height: 100%;
        margin-right: 40px;
        .dataScreen-top,
        .dataScreen-center,
        .dataScreen-bottom {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          padding-top: 54px;
        }
        .dataScreen-top {
          height: 37%;
          background: #11144e;
          border-radius: 8px;
          padding: 16px;
        }
        .dataScreen-center {
          height: 30%;
          background: #11144e;
          padding: 16px;
          border-radius: 8px;
        }
        .dataScreen-bottom {
          height: 27%;
          padding: 16px;
          margin-bottom: 16px;
          border-radius: 8px;
          background: #11144e;
        }
      }
      .dataScreen-main-title {
        // position: absolute;
        // top: 1px;
        // left: 0;
        display: flex;
        span {
          margin-bottom: 12px;
          font-family: YouSheBiaoTiHei;
          font-size: 18px;
          line-height: 16px;
          color: #ffffff;
          letter-spacing: 1px;
        }
        div {
          width: 6px;
          background: #3370fe;
          border-radius: 8px;
          height: 20px;
          margin-right: 8px;
        }
      }
      .dataScreen-main-chart {
        // width: 100%;
        // height: 100%;
      }
    }
  }
}
</style>

